<template>
	<view class="zxpage" >
		<view v-if="current==0&&bigcurrent==1">
			<view class="flex-center u-font-36 u-m-tb-30 u-font-bold" style="color: #CC0000;">
				排盘
			</view>
			<view class="flex-center u-font-26">
				<view class="leftitem">
					命主信息：
				</view>
				<view class="rightitem">
					<text style="width: 90rpx;" >姓名</text>
					<input type="text" v-model="name" style="padding-left: 10rpx; width: 200rpx;" placeholder="请输入姓名" />
				</view>
			</view>
		
			<view class=" u-font-26" style="display: flex;">
				<view class="leftitem">
					起盘方式：
				</view>
				<view class="rightitemyear">
					<u-radio-group v-model="value" placement="row">
						<u-radio :customStyle="{fontSize: '24rpx'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.id" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			
			<view class=" u-font-26" style="display: flex;">
				<view class="leftitem">
					子时流派：
				</view>
				<view class="rightitemyear">
					<view style="display: flex; ">
						<text style="width: 90rpx;">流派</text>
						<view class="fakeselect" @click="lpshow=true">
							{{lp}}
						</view>
					</view>
				</view>
			</view>
			
			<view class=" u-font-26" style="display: flex;">
				<view class="leftitem">
					出生时间：
				</view>
				<view class="rightitemyear">
					<view style="display: flex; ">
						<text style="width: 90rpx;">年月日</text>
						<view class="fakeselect" @click="opendate">
							{{years}}
						</view>
					</view>
					<view style="display: flex; margin: 10rpx 0; ">
						<text style="width: 90rpx;">小时</text>
						<view class="fakeselect" @click="hourshow=true">
							{{hours}}
						</view>
					</view>
					<view style="display: flex; " v-if="value==1">
						<text style="width: 90rpx;">分钟</text>
						<view class="fakeselect" @click="minshow = true">
							{{min}}
						</view>
					</view>
				</view>
			</view>
			<view class=" u-font-26" style="display: flex;">
				<view class="leftitem">
					命主性别：
				</view>
				<view class="rightitemyear">
					<u-radio-group v-model="sex" placement="row">
						<u-radio :customStyle="{fontSize: '24rpx'}" v-for="(item, index) in radiosex" :key="index"
							:label="item.name" :name="item.id" @change="radioChangesex">
						</u-radio>
					</u-radio-group>
					<text style="color: #CC0000;" >（排盘结果男女有别，请正确选择）</text>
				</view>
			</view>
			<view class=" u-font-26" style="display: flex;">
				<view class="leftitem">
					是否保存：
				</view>
				<view class="rightitemyear">
					<u-radio-group v-model="save" placement="row">
						<u-radio :customStyle="{fontSize: '24rpx'}" v-for="(item, index) in radiosave" :key="index"
							:label="item.name" :name="item.id" @change="radioChangesave">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			
			
			<!-- 年月日组件 -->
			<calendar ref="calendar1" @changeyeartype='changeyeartype' @changeisActive='changeisActive' :yeartype='yeartype'
				:isActive='isActive' @confirm="confirm"></calendar>
			<!-- 小时选择器 -->
			<u-picker :show="hourshow" @confirm=confirmhour @cancel='hourshow=false' keyName="label" :columns="hourcolumns"></u-picker>
			
			<!-- 分钟选择器 -->
			<u-picker :show="minshow" @confirm=confirmmin @cancel='minshow=false' keyName="label" :columns="mincolumns"></u-picker>
			
			<!-- 流派选择器 -->
			<u-picker :show="lpshow" @confirm=confirmlp @cancel='lpshow=false' keyName="label" :columns="lpcolumns"></u-picker>
		</view>
		<result v-if="current==1&&bigcurrent==1" :bginfo='bginfo' ></result>
		<view class="flex-center u-m-tb-30" v-if="current==0&&bigcurrent==1"  @click="beginclick" >
			<text class="begin" >开始排盘</text>
		</view>
		<view class="flex-center u-m-tb-30" v-if="current==1&&bigcurrent==1"  @click="current=0" >
			<text class="begin" >重新排盘</text>
		</view>
		<view class="bottomtab flex-between">
			<view class="bottomtab_item flex-between" @click="bigcurrent=1,current=0">
				<u-icon name='home' ></u-icon>
				<text>排盘</text>
			</view>
			<view class="bottomtab_item flex-between" @click="bigcurrent=2">
				<u-icon name='list' ></u-icon>
				<text>记录</text>
			</view>
		</view>
		<history v-if="bigcurrent==2" ></history>
		<view class="" style="width: 100%; height: 100rpx; ">
			
		</view>
	</view>
</template>

<script>
	import calendar from '@/components/calendar-boke/calendar.vue'
	import result from './result.vue';
	import history from './history.vue';
	const YLhours=[
		{label:'0->子时',value:0},
		{label:'1->丑时',value:1},
		{label:'2->丑时',value:2},
		{label:'3->寅时',value:3},
		{label:'4->寅时',value:4},
		{label:'5->卯时',value:5},
		{label:'6->卯时',value:6},
		{label:'7->辰时',value:7},
		{label:'8->辰时',value:8},
		{label:'9->已时',value:9},
		{label:'10->已时',value:10},
		{label:'11->午时',value:11},
		{label:'12->午时',value:12},
		{label:'13->未时',value:13},
		{label:'14->未时',value:14},
		{label:'15->申时',value:15},
		{label:'16->申时',value:16},
		{label:'17->酉时',value:17},
		{label:'18->酉时',value:18},
		{label:'19->戌时',value:19},
		{label:'20->戌时',value:20},
		{label:'21->亥时',value:21},
		{label:'22->亥时',value:22},
		{label:'23->子时',value:23},
	]
	export default {
		components: {
			calendar,
			result,
			history
		},
		data() {
			return {
				bigcurrent:1,
				hours:'',
				min:'',
				name:'',
				lp:'',
				showCalendar: false,
				hourshow:false,
				minshow:false,
				lpshow:false,
				hourcolumns:[],
				mincolumns:[],
				lpcolumns:[[
					{label:'流派1：晚子时日柱算明天',value:1},
					{label:'流派2：晚子时日柱算当天',value:2},
				]],
				value: 1,
				sex:1,
				radiolist1: [{
						name: '公历排盘',
						id: 1
					},
					{
						name: '农历排盘',
						id: 2
					}
				],
				radiosex:[{
					name:'男',
					id:1
				},{
					name:'女',
					id:2
				}],
				radiosave:[{
					name:'是',
					id:1
				},{
					name:'否',
					id:2
				}],
				bginfo:{},
				save:1,
				years: '',
				yeartype: 'solar',
				isActive: true,
				time_type:1,
				year:'',
				month:'',
				day:'',
				current:0,
				hour:null,
				minute:null,
				ri_liu_pai:''
			};
		},
		onLoad() {
			this.hourcolumns = this.getGLhour()
			this.mincolumns = this.getmin()
		},
		
		methods: {
			//点击开始排盘
			beginclick(){
				if(!this.name){
					return this.$toast('请输入姓名')
				}
				if(!this.years){
					return this.$toast('请选择年月日')
				}
				if(!this.ri_liu_pai){
					return this.$toast('请选择流派')
				}
				if(this.hour==null){
					return this.$toast('请选择小时')
				}
				if(this.value==1&&this.minute==null){
					return this.$toast('请选择分钟')
				}
				
				
				this.$api.get('/user/ba_zi',{
					year:this.year,
					month:this.month,
					day:this.day,
					hour:this.hour,
					minute:this.minute||0,
					gender:this.sex,
					time_type:this.time_type,
					ri_liu_pai:this.ri_liu_pai,
					name:this.name,
					is_save:this.save
				}).then(res=>{
					this.current=1
					this.bginfo = res.data
				})
			},
			// 阳历小时
			getGLhour(){
				let arr = []
				for(let i=0;i<24;i++){
					arr.push({label:i+'时',value:i})
				}
				return [arr]
			},
			//获取分钟
			getmin(){
				let arr = []
				for(let i=1;i<60;i++){
					arr.push({label:i+'分',value:i})
				}
				return [arr]
			},
			//选择阴历阳历
			radioChange(n) {
				this.years = ''
				this.yeartype = n === 1 ? 'solar' : 'lunar'
				this.isActive = n === 1 ? true : false
				this.hourcolumns = n===1?this.getGLhour():[YLhours],
				this.time_type = n
			},
			//选择性别
			radioChangesex(n){
				this.sex = n
			},
			//选择是否保存
			radioChangesave(n){
				this.save = n
			},
			changeyeartype(item) {
				this.yeartype = item
			},
			changeisActive(item) {
				this.isActive = item
			},
			//打开年月日
			opendate() {
				this.$refs.calendar1.isShowDateMask = true
			},
			//确定选择年月日
			async confirm(e) {
				let dateStr = e.dateGL;
				let dateObj = new Date(dateStr);
				let year = dateObj.getFullYear();
				let month = dateObj.getMonth() + 1; 
				let day = dateObj.getDate();
				
				this.year = year
				this.month = month
				this.day = day
				this.years = this.value == 1 ? e.dateGL : e.lunarDate + e.dateYL
			},
			//确定选择小时
			confirmhour(e){
				this.hours = e.value[0].label
				this.hour = e.value[0].value
				this.hourshow = false
			},
			//确定选择分钟
			confirmmin(e){
				this.min = e.value[0].label
				this.minute = e.value[0].value
				console.log(this.minute);
				this.minshow = false
			},
			//确定选择流派
			confirmlp(e){
				this.lp = e.value[0].label
				this.ri_liu_pai = e.value[0].value
				this.lpshow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zxpage{
		position: relative;
		box-sizing: border-box;

		.bottomtab{
			position: fixed;
			bottom: 0;
			width: 100%;
			.bottomtab_item{
				padding-top: 20rpx;
				background-color: #E6E6E6;
				width: 50%;
				border-right: 1rpx solid #000;
				flex-direction: column;
			}
			
		}
	}
	.leftitem {
		background-color: #C49B33;
		padding: 6rpx 10rpx;
		flex: 1;
		text-align: left;
		border: 1rpx solid #fff;
		min-height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.rightitem {
		line-height: 50rpx;
		flex-wrap: wrap;
		display: flex;
		flex: 3;
		background-color: #CCCC9E;
		border: 1rpx solid #fff;
		padding: 6rpx 10rpx;
		min-height: 50rpx;
		input {
			font-size: 26rpx;
			border: 1rpx solid #000;
		}
	}

	.rightitemyear {
		flex: 3;
		background-color: #CCCC9E;
		border: 1rpx solid #fff;
		padding: 6rpx 10rpx;

		.fakeselect {
			border: 1rpx solid #000;
			min-width: 200rpx;
			padding: 0 6rpx;
		}
	}
	.begin{
		background-color: #BB271A;
		color: #fff;
		padding: 6rpx 20rpx;
	}
</style>